<script setup lang="tsx">
import { PropType, ref, nextTick, unref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag, ElTree } from 'element-plus'
// import { findIndex } from '@/utils'
import { getMenuListApi } from '@/api/menu'
import { RoleListItem } from '@/api/role/type'
import { RoutetItem } from '@/api/menu/type'

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})

// const filterPermissionName = (value: string) => {
//   const index = findIndex(unref(currentTreeData)?.permissionList || [], (item) => {
//     return item.value === value
//   })
//   return (unref(currentTreeData)?.permissionList || [])[index].label ?? ''
// }

const renderTag = (enable?: boolean) => {
  return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
}

const treeRef = ref<typeof ElTree>()

const treeData = ref<RoutetItem[]>([])
const setEnabled = (includes: string[]) => {
  for (const route of includes) {
    const node = unref(treeRef)!.getNode(route)
    unref(treeRef)!.setChecked(node, true, false)
    for (const child of node.childNodes) {
      unref(treeRef)!.setChecked(child, true, false)
    }
  }
}
const getMenuList = async () => {
  const res = await getMenuListApi(props.currentRow.role)
  if (res) {
    // treeData.value = res.data.list

    const setTitle = (node: RoutetItem) => {
      const meta = JSON.parse(node.meta)
      node['title'] = meta.title
      node['disabled'] = true
      if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
          const child = node.children[i]
          setTitle(child)
          if (child['props']) {
            node.children.splice(i, 1);
            i--
          }
        }
        if (node.children.length == 1) {
          node['title'] = node.children[0]['title']
          node.children.splice(0, 1);
        }
      }
    }

    for (const node of res.data.list) {
      if (res.data.includes.includes(node.name)) {
        setTitle(node)
        treeData.value.push(node)
      }
    }
    // await nextTick(()=>{setEnabled(res.data.includes)})
  }
}
getMenuList()

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'name',
    label: '角色名称',
    align: 'center',
    labelAlign: 'center'
  },
  {
    field: 'role',
    label: '角色类型',
    slots: {
      default: (data: RoleListItem) => {
        return <>{data.role == 'admin' ? '管理员' : '普通用户'}</>
      },
    },
    align: 'center',
    labelAlign: 'center'
  },
  {
    field: 'enabled',
    label: '状态',
    slots: {
      default: (data: RoleListItem) => {
        return renderTag(data.enabled)
      }
    },
    labelAlign: 'center'
  },
  {
    field: 'permissionList',
    label: '已分配的功能',
    span: 24,
    labelAlign: 'center',
    slots: {
      default: () => {
        return (
          <>
            <div class="flex w-full">
              <div class="flex-1">
                <ElTree
                  ref={treeRef}
                  node-key="name"
                  props={{ children: 'children', label: 'title' }}
                  highlight-current
                  data={treeData.value}
                  defaultExpandAll
                >
                  {{
                    default: (data) => {
                      return <span>{data?.data?.title}</span>
                    }
                  }}
                </ElTree>
              </div>
              <div class="flex-1">

              </div>
            </div>
          </>
        )
      }
    }
  }
])
</script>

<style lang="scss">
.is-checked .el-checkbox__inner {
  background-color: var(--el-color-primary) !important;
}

.is-checked .el-checkbox__inner::after {
  border-color: var(--el-color-white) !important;
}
</style>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
